<template>
  <div>
    <h1 class="content">按照菜谱秀出你的菜谱</h1>
    <div class="click">
      <div @click="fn(0)" :class="{roder:pro[0].isactive}">正在流行</div>
      <div @click="fn(1)" :class="{roder:pro[1].isactive}">24小时最佳</div>
    </div>
    <keep-alive>
      <component :is="data"></component>
    </keep-alive>
  </div>
</template>
<script>
import Produca from "./produca.vue";
import Producb from "./producb.vue";
export default {
  name: "produc",
  data() {
    return {
      data: "Produca",
      pro: [{reda:Produca,isactive:true}, {reda:Producb,isactive:false}],
    };
  },
  components: {
    Produca,
    Producb,
  },
  methods: {
    fn(index) {
      this.data = this.pro[index].reda;
      this.pro.forEach(item=>{
          item.isactive=false
      })
      this.pro[index].isactive=true
    },
  },
};
</script>
<style scoped lang="less">
.click{
    display: flex;
}
.roder{
    color: red;
}
.content {
  width: 1000px;
  margin: 0 aotu;
  margin-top:150px;
}
h1 {
  font-size: 37px;
}
.click div {
  margin-top: 20px;
  margin-right: 50px;
}
</style>